<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <link rel="stylesheet" href="../../static/css/conson.css" th:href="@{/css/conson.css}">
</head>

<body class="body">

<!--导航-->
<nav th:replace="admin/_PublicTemplate :: nav"></nav><br><br>

<!-- 详情内容 -->
<div class=" m-container m-padded-tb-big animated bounceInRight">
    <div class="ui container ">
        <div class="ui buttons">
            <button class="ui button"><a th:href="@{/kings/kings}" href="#" style="color: cadetblue">返回后台</a></button>
            <button class="ui button"><a href="#" th:href="@{/kings/Tags/input}" style="color: cadetblue">新增标签</a>
            </button>
        </div>
        <!-- 二级菜单 -->
        <div class="ui segment ">
            <div id="context2">
                <div class="ui secondary pointing menu">
                    <a class="item" data-tab="one">分类信息</a>
                </div>

                <!-- 分类 -->
                <div class="ui active tab segment" data-tab="one">
                    <form action="#" method="post" class="ui form">
                        <div class="" th:if="${page.totalPages}>1">
                            <div class="ui mini pagination menu">
                                <a class="item" th:href="@{/kings/Tags(page=${page.number}-1)}"
                                   th:unless="${page.first}" href="#">上一页</a>
                                <a class="item" th:href="@{/kings/Tags(page=${page.number}+1)}"
                                   th:unless="${page.last}" href="#">下一页</a>
                            </div>
                        </div>
						<div style="text-align: center;color: dodgerblue" class="animated bounceInDown" th:unless="${#strings.isEmpty(message)}" th:text="${message}">
							新增成功
						</div>
                        <br>

                        <table class="ui compact celled definition table">
                            <thead>
                            <tr>
                                <th></th>
                                <th>编号</th>
                                <th>标题</th>
                                <th>操作</th>
                            </tr>
                            </thead>
							<tbody>
                            <tr th:each="tag,iterStat : ${page.content}">
                                <td class="collapsing">
                                    <div class="ui fitted slider checkbox">
                                        <input type="checkbox"> <label></label>
                                    </div>
                                </td>
                                <td th:text="${iterStat.count}">1</td>
                                <td th:text="${tag.name}">露娜的故事</td>
                                <td>
                                    <a th:href="@{/kings/Tags/{id}/delete(id=${tag.id})}" href="#"
                                       class="ui mini orange button">删除</a>
                                    <a th:href="@{/kings/Tags/{id}/input(id=${tag.id})}" href="#"
                                       class="ui mini green button">修改</a>
                                </td>
                            </tr>

                            </tbody>
						</table>



                        <br>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer th:replace="admin/_PublicTemplate :: footer"></footer>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script>

    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown')
        .dropdown();

    $('#context2 .menu .item')
        .tab({
            // special keyword works same as above
            context: 'parent'
        });

    $('.ui.checkbox')
        .checkbox()
    ;

</script>

</body>
</html>
